{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <style>
        .fui-cell-group{width:100%;}
        .fullback-title{color:#999999;font-size:0.7rem;padding:0.75rem 0 0.5rem 0;}
        .fullback-info{}
        .fullback-info p{height:1rem;line-height: 1rem;font-size:0.625rem;color:#333;display: inline-block;padding:0 0.5rem 0 0;}
        .fullback-info p i{border:none;height:0.75rem;width:0.75rem;display: inline-block;background: #ff4753;color:#fff;font-size:0.4rem;line-height: 0.8rem;text-align: center;
            font-style: normal;border-radius: 0.75rem;-webkit-border-radius: 0.75rem;margin-right:0.25rem;}
        .fullback-remark{line-height: 1rem;font-size:0.6rem;color:#666;padding:0.2rem 0;}
        .fui-mask-picker{
            position: fixed;
            background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
            width: 100%;
            height: 100%;
            left: 0;
            opacity: 0;
            top: 0;
            z-index: 1000;
            -moz-transition-duration: 400ms;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
        }
        .fui-mask-picker.visible{opacity:1;}
    </style>
    <div class="fui-page fui-page-current page-goods-detail">
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back" id="btn-back"></a>
            </div>
            <div class="title">
                <div id="tab" class="fui-tab fui-tab-danger">
                    <a data-tab="tab1" class="tab active">商品</a>
                    <a data-tab="tab2" class="tab">详情</a>
                    <a data-tab="tab3" class="tab">参数</a>
                    <a data-tab="tab4" class="tab" style="display:none" id="tabcomment">评价</a>
                </div>
            </div>
            <div class="fui-header-right"></div>
        </div>
        <div class="fui-content basic-block pulldown ">
            <!--轮播已完成-->
            {if(!empty($goodsModel) && !empty($goodsModel['thumbs']))}
            <div class="fui-swipe goods-swipe">
                <div class="fui-swipe-wrapper">
                    {volist name=":explode(',',$goodsModel['thumbs'])" id="vo"}
                    <div class='fui-swipe-item'><img src="__STATIC__/m/imgs/placeholder.png"  data-lazy="{$vo}" /></div>
                    {/volist}
                </div>
                <div class='fui-swipe-page'></div>
            </div>
            {/if}
            <!--秒杀完成-->
            <div class="fui-cell-group fui-detail-group">
                <div class="fui-cell">
                    <div class="fui-cell-text name ">
                        <!--预售完成-->
                        {$goodsModel['goods_name']}
                    </div>
                    <a class="fui-cell-remark share" id="btn-share">
                        <i class="icon icon-share"></i>
                        <p>分享</p>
                    </a>
                </div>
                <!--批发-->
                <!--正常价格-->
                <div class="fui-cell">
                    <div class="fui-cell-text price">
                        <span class="text-danger" style="vertical-align: middle;">¥{$goodsModel['min_price']}{if($goodsModel['min_price']!=$goodsModel['max_price'])}~{$goodsModel['max_price']}{/if}</span>
                    </div>
                    <!--分销佣金-->
                </div>
                <!--促销倒计时-->
                <!--限时购完成-->
                <!--预售倒计时完成-->
                <div class="fui-cell titletabinfo" style="font-size: 0.55rem;line-height: 1.2rem;justify-content: space-between;-webkit-justify-content: space-between;flex-wrap: wrap;-webkit-flex-wrap: wrap;color: #666;">
                    <!--<div class="flex">-->
                    <p>快递：包邮 </p>
                    <!--</div>-->
                </div>
            </div>
            <!--预售提示完成-->
            <!-- 商品可用优惠券 -->
            <!-- 所有营销 -->
            <div class="fui-cell-group  fui-sale-group nomargin">
                <!-- 会员等级 -->
            </div>
            <!--赠品-->
            <!--服务完成-->
            <!--配送区域完成-->
            <!--数量规格-->
            {if ($goodsModel['stock'] > 0)}
            <div class="fui-cell-group fui-cell-click">
                <div class="fui-cell">
                    <div class="fui-cell-text option-selector">请选择{if empty($spec_titles)}数量{else}{$spec_titles}等{/if}</div>
                    <div class="fui-cell-remark"></div>
                </div>
            </div>
            {/if}
            <div id="comments-container"></div>
            <!--店铺信息-->
            <!--
            <div class="fui-cell-group fui-shop-group" style="display:none;">
                <a class="fui-list" href="http://hejiangshop.me/app/index.php?i=1&amp;c=entry&amp;m=ewei_shopv2&amp;do=mobile">
                    <div class="fui-list-media">
                        <img src="http://hejiangshop.me/attachment/images/1/2018/06/BIyZgzpy2zGTT2ugIGQJj3tUNPOToN.jpg" data-lazyloaded="true">
                    </div>
                    <div class="fui-list-inner">
                        <div class="title" style="padding-top:0.15rem">商城</div>
                        <div class="subtitle"></div>
                    </div>
                    <div class="fui-list-angle " style="margin-right: 0.2rem;">
                        <span class="btn btn-default-o external goshop">进店逛逛</span>
                    </div>
                </a>
            </div>
            -->
            <!--购买后显示-->
            <div class="fui-cell-group">
                <div class="fui-cell">
                    <div class="fui-cell-text text-center look-detail">
                        <i class="icon icon-fold"></i>
                        <span>上拉查看图文详情</span>
                    </div>
                </div>
            </div>
        </div>
        <!--商品详情已完成-->
        <div class="fui-content detail-block" style="transition-duration: 300ms;">
            <div class="text-danger look-basic"><i class="icon icon-unfold"></i> <span>上拉返回商品详情</span></div>
            <div class="content-block content-images"></div>
        </div>
        <!--参数已完成-->
        <div class="fui-content param-block">
            <div class="fui-cell-group notop">
                <div class="fui-cell">
                    <div class="fui-cell-label md">品牌</div>
                    <div class="fui-cell-info overflow md" style="line-height: 1.0rem;">&nbsp;声乐</div>
                </div>
            </div>
        </div>
        <!--评价-->
        <div class="fui-content comment-block" data-getcount="1" id="comments-list-container">
            <div class="fui-icon-group col-5 ">
                <div class="fui-icon-col" data-level="all"><span class="text-danger">全部<br><span class="count">0</span></span></div>
                <div class="fui-icon-col" data-level="good"><span>好评<br><span class="count">0</span></span></div>
                <div class="fui-icon-col" data-level="normal"><span>中评<br><span class="count">0</span></span></div>
                <div class="fui-icon-col" data-level="bad"><span>差评<br><span class="count">0</span></span></div>
                <div class="fui-icon-col" data-level="pic"><span>晒图<br><span class="count">0</span></span></div>
            </div>
            <div class="content-empty" style="display:none;">
                <i class="icon icon-community"></i><br>暂时没有任何评价
            </div>
            <div class="container" id="comments-all"></div>
            <div class="infinite-loading"><span class="fui-preloader"></span><span class="text"> 正在加载...</span></div>
        </div>
        <!--赠品弹层-->
        <!--底部按钮-->
        {if ($goodsModel['stock'] > 0)}
        <div class="fui-navbar bottom-buttons">
            <!--
            <a class="nav-item favorite-item active" data-isfavorite="1">
                <span class="icon icon-likefill"></span>
                <span class="label">关注</span>
            </a>
            -->
            <!--
            <a class="nav-item external" href="./index.php?i=1&amp;c=entry&amp;m=ewei_shopv2&amp;do=mobile">
                <span class="icon icon-shop"></span>
                <span class="label">店铺</span>
            </a>
            -->
            <a class="nav-item cart-item" href="{:url('m/Member/cart')}" data-nocache="true" id="menucart">
                <!--<span class="badge in">3</span>-->
                <span class="icon icon-cart"></span>
                <span class="label">购物车</span>
            </a>
            <a class="nav-item btn cartbtn" data-type="1">加入购物车</a>
            <a class="nav-item btn buybtn" data-type="1">立刻购买</a>
        </div>
        {else /}
        <div class="fui-cell-group fui-cell-click nobuy">
            <div class="fui-cell">
                <div class="fui-cell-text">
                    商品已经售罄!
                </div>
            </div>
        </div>
        {/if}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    {include file="goods/picker" /}
    <!--页面的JavaScript要放在页面内才能加载到-->
    <script>
        var detail = {};
        detail.init = function(params){
            detail.goodsid = params.goodsid;
            detail.attachurl_local = params.attachurl_local;
            detail.attachurl_remote = params.attachurl_remote;
            detail.new_temp = params.new_temp;
            detail.tabInit();
            detail.pullToLoading();
            $(".bottom-buttons .cartbtn").click(function() {
                detail.optionPicker('cart')
            });
            $(".bottom-buttons .buybtn").click(function() {
                detail.optionPicker('buy')
            });
            $('.fui-cell-click').click(function() {
                detail.optionPicker('')
            });
        };
        detail.tabInit = function(){
            $('#tab a').on('click',function () {
                $('#tab a').removeClass('active');
                $(this).addClass('active');
                var _index = $(this).index();
                $('.fui-content').removeClass('in').hide(0).eq(_index).show(0).addClass('in');
                if (1 == _index) {
                    detail.getDetailContent();
                }
            })
        };
        detail.pullToRefresh = function () {
            $('.detail-block').pullToRefresh({
                onRefreshReady: function() {
                    $(".look-basic").html("<i class='icon icon-fold'></i> <span>释放返回商品详情</span>")
                },
                onRefresh: function() {
                    $(".look-basic").html("<i class='icon icon-unfold'></i> <span>下拉返回商品详情</span>");
                    $('.basic-block').show();
                    $('.detail-block').removeClass('in').pullToRefresh('done');
                    $('#tab .tab.active').removeClass('active');
                    $('#tab .tab:first-child').addClass('active')
                }
            })
        }
        detail.pullToLoading = function () {
            $('.basic-block').pullToLoading({
                onLoadingReady: function() {
                    $(".look-detail").html("<i class='icon icon-unfold'></i> <span>释放查看图文详情</span>")
                },
                onLoading: function() {
                    $(".look-detail").html("<i class='icon icon-fold'></i> <span>上拉查看图文详情</span>");
                    $('.basic-block').pullToLoading('done');
                    // modal.showDetail();
                    detail.showDetail();
                    $('#tab .tab.active').removeClass('active');
                    $('#tab .tab:eq(1)').addClass('active')
                }
            })
        }
        detail.showDetail = function() {
            $('#tab a').eq(1).click();
        }
        detail.getDetailContent = function() {
            if ($('.detail-block').find('.content-block').html() != '') {
                return
            }
            FoxUI.loader.show('mini');
            $.ajax({
                url: "{:url('get_detail_content')}",
                data:{id:detail.goodsid},
                cache: true,
                success: function(html) {
                    FoxUI.loader.hide();
                    var detailHeight = $('.detail-block').css('height');
                    $('.detail-block').find('.content-block').css('height','auto').html(html);
                    setTimeout(function() {
                        $('.detail-block').lazyload();
                        // $('.detail-block').find('.content-block').css('height', 'auto');
                        // if (!modal.close_preview) {
                        //     core.showImages('.content-block img')
                        // }
                        var $html = $(html).find('img');
                        if ($html.length > 0) {
                            for (var i = 0, len = $html.length; i < len; i++) {
                                $html[i].onerror = function() {
                                    var $this = $(this);
                                    var data_lazy = $this.attr('data-lazy');
                                    if (!$this.attr('check-src') && (data_lazy.indexOf('http://') > -1 || data_lazy.indexOf('https://') > -1)) {
                                        var src = data_lazy.indexOf(detail.attachurl_local) == -1 ? data_lazy.replace(detail.attachurl_remote, detail.attachurl_local) : data_lazy.replace(detail.attachurl_local, detail.attachurl_remote);
                                        $this.attr('data-lazy', src);
                                        $this.attr('check-src', true)
                                    }
                                }
                            }
                        }
                    }, 1000);
                    // if (!modal.new_temp) {
                    //     detail.pullToRefresh();
                    // }
                }
            })
        }
        detail.optionPicker = function(_type) {
            console.log('openPicker')
            vuePicker.openPicker(_type);
            // addGoodsToCart(detail.goodsid,1);
        }
        detail.init({
            goodsid:{$goodsModel['id']}
            ,new_temp:1
        });
        function addGoodsToCart(_goodsId,_optionId, _total) {
            FoxUI.loader.show('mini');
            $.ajax({
                url: "{:url('add_goods_to_cart')}",
                data:{id:_goodsId,option_id:_optionId,total:_total},
                success: function(json) {
                    FoxUI.loader.hide();
                    if(json.code){
                        // $('.cart-item').find('.badge').html(json.data.cart_count).removeClass('out').addClass('in');
                        // changeCartcount(json.data.cart_count);
                        FoxUI.toast.show(json.msg)
                    }
                    else{
                        FoxUI.toast.show(json.msg)
                    }
                }
            });
        }
        function changeCartcount(count) {
            if ($("#menucart").length > 0) {
                var badge = $("#menucart").find(".badge");
                if (badge.length < 1) {
                    $("#menucart").append('<span class="badge">' + count + '</div>')
                } else {
                    badge.text(count)
                }
            }
        }

        /**
         * picker 回调
         * @param _goodsId 商品id
         * @param _optionId 规格id
         * @param _total 数量
         * @param _type 类型 cart 购物车 ，buy 直接购买
         */
        function pickerCallBack(_goodsId, _optionId, _total,_type) {
            console.log(_goodsId)
            console.log(_optionId)
            console.log(_total)
            console.log(_type)

            if ('cart' == _type) {
                addGoodsToCart(_goodsId,_optionId,_total);
            }
            else{
                $.router.load(core.getUrl("{:url('m/Order/create')}", {
                    ids: _goodsId
                    ,option_ids:_optionId
                    ,total:_total
                }), false)
            }
        }
    </script>
    <script>
        var goods_specs = {:json_encode($goodsModel['specs'],256)};
        var goods_options = {:json_encode($options,256)};
    </script>
    <script>
        vuePicker.init({
            data:{
                goods:{
                    id:'{$goodsModel['id']}'
                    ,minPrice:'{$goodsModel['min_price']}'
                    ,maxPrice : '{$goodsModel['max_price']}'
                    ,thumb : '{:getGoodsThumb($goodsModel['thumbs'])}'
                }
                ,specs : goods_specs
                ,options : goods_options
            }
        })
    </script>
</div>
{/block}
{block name="script"}
{/block}